<template>
  <div class="tab-bar">
    <router-link class="item" :to="{name: 'm-home'}">
      <span></span>
      <div>首页</div>
    </router-link>
    <router-link class="item" :to="{name: 'm-vip'}">
      <span></span>
      <div>会员</div>
    </router-link>
    <router-link class="item" :to="{name: 'm-setting'}">
      <span></span>
      <div>设置</div>
    </router-link>
    <router-link class="item" :to="{name: 'm-mine'}">
      <span></span>
      <div>我的</div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "TabBarComponent"
}
</script>

<style scoped lang="less">
.tab-bar {
  height: 1rem;
  background-color: #fff;
  box-shadow: 0 -.01rem .2rem #333333;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;

  .item {
    width: 25%;

    span {
      display: block;
      height: 0.6rem;
      width: 0.6rem;
      margin: 0 auto;
      background: no-repeat center / contain;
    }

    div {
      font-size: .16rem;
      color: #333;
      text-align: center;
    }

    &.active {
      div {
        color: #8d1dfd;
      }
    }

    &:nth-child(1) span {
      background-image: url("../../assets/images/icon/home.svg");
    }

    &.active:nth-child(1) span {
      background-image: url("../../assets/images/icon/home-active.svg");
    }

    &:nth-child(2) span {
      background-image: url("../../assets/images/icon/huiyuan.svg");
    }

    &.active:nth-child(2) span {
      background-image: url("../../assets/images/icon/huiyuan-active.svg");
    }
    &:nth-child(3) span {
      background-image: url("../../assets/images/icon/setting.svg");
    }
    &.active:nth-child(3) span {
      background-image: url("../../assets/images/icon/setting-active.svg");
    }
    &:nth-child(4) span {
      background-image: url("../../assets/images/icon/user.svg");
    }
    &.active:nth-child(4) span {
      background-image: url("../../assets/images/icon/user-active.svg");
    }
  }
}
</style>
